<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- View -->
  <div id="app">
    消息: {{ message }}
  </div>

  <script src="./lib/vue.global.js"></script>
  <script>
    // 引入 vue 的 js 文件后，会自动在全局范围内挂载 Vue 对象的使用
    // 调用 Vue.createApp() 创建应用实例，
    // 创建应用实例时，传递一个 options 选项对象作为参数
    // 选项对象中可以有 data 字段，表示应用所需要关联使用的数据
    const app = Vue.createApp({
      data() { // Model
        // data 是一个函数，该函数体内部返回一个对象，对象中
        // 的数据可在视图模板中被直接使用到
        return {
          message: 'Hello Vue3.x',
        }
      }
    })
    // 应用实例必须在调用了 .mount() 方法后才会渲染出来
    app.mount('#app')
  </script>
</body>
</html>